<template>
    <div>
        <div class="RecQuestion">
            <div :class="['recItem',{'mb0':i==questionList.length - 1}]" v-for="(item,i) in questionList" :key="i">
                <div class="recContent" @click="openSelect(i)">
                    {{item.question}}
                </div>
                <div class="operation">
                    <span :class="['iconfont', 'icon-tianjia',{'prohibit':questionList.length==5}]" v-if="i == 0" @click="addRec"></span>
                    <span class="iconfont icon-shanchu" v-if="i != 0" @click="delRec(i)"></span>
                </div>
            </div>
            <p style="color: #90979D">最多可设置5个</p>
        </div>
        <select-question :questionVisible.sync="questionVisible" @getRecData="getRecData" :questionId="questionId"></select-question>
    </div>
</template>

<script>
import selectQuestion from "@/components/selectQuestion"
export default {
    name: "RecQuestion",
    props: {
        recList: {
            type: Array,
            default: () => [{ id: "", name: "" }]
        }
    },
    created() {
    },
    mounted() {
    },
    data() {
        var questionList = this.recList.length != 0 ? this.recList : [{ questionId: "", question: "" }];
        return {
            questionVisible: false,
            questionList: questionList,
            currentIndex: 0,
            questionId: ""
        }
    },
    methods: {
        openSelect(index) {
            this.questionVisible = true;
            this.currentIndex = index;
            this.questionId = this.questionList[index].questionId;
        },
        getRecData(data) {
            this.$set(this.questionList, this.currentIndex, data);
        },
        addRec() {
            if (this.questionList.length > 4) {
                this.$antMessage.warning("最多添加5个问题");
            } else {
                this.questionList.push({ questionId: "", question: "" });
            }
        },
        delRec(index) {
            this.questionList.splice(index, 1)
        }
    },
    watch: {
        recList(val) {
            if (val.length == 0) {
                this.questionList = [{ questionId: "", question: "" }];
            } else {
                this.questionList = val;
            }
        },
        questionList(val) {
            this.$emit("update:recList", val);
        }
    },
    components: {
        selectQuestion
    }
}
</script>

<style lang="scss">
.RecQuestion {
    .mb0 {
        margin-bottom: 0 !important;
    }
    .recItem {
        display: flex;
        height: 34px;
        margin-bottom: 10px;
        .recContent {
            flex: 1;
            border: 1px solid #dae1e9;
            border-radius: 6px;
            cursor: pointer;
            line-height: 34px;
            padding-left: 16px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .operation {
            flex-shrink: 0;
            .iconfont {
                display: inline-block;
                width: 34px;
                height: 100%;
                font-size: 22px;
                text-align: center;
                line-height: 36px;
                color: #b7c1c9;
                background: #f5f7fa;
                border-radius: 6px;
                margin-left: 20px;
                cursor: pointer;
                &:hover {
                    background: #eaeef4;
                    color: #abb4bc;
                }
            }
            .prohibit {
                color: #dae1e9 !important;
                background: #f5f7fa !important;
            }
        }
    }
}
</style>